<style lang="less" scoped>
	.f{
		width: 600rpx;
		height: 150rpx;
		line-height: 150rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin:0 auto;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}
	.online_book {
		background:#62D4A6;
	}
	.book_records {
		background:#06BEBE;
		margin-top: 40rpx;
	}
	.container {
		padding-top: 170rpx;
		.t {
			padding-bottom: 30rpx;
			display: block;
			padding-left: 20rpx;
		}
	}
	.explain {
		margin:0 auto;
		text-align: center;
		margin-top: 40rpx;
		background-color: #539DB6;
		border-radius: 10rpx;
		width: 600rpx;
		text-align: left;
		.con {
			padding:20rpx;
			text {
				font-size:34rpx;
				display: block;
				padding-bottom: 20rpx;
			}
			p {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			text,p {
				color:#fff
			}
		}
	}
	.icon {
		vertical-align: -webkit-baseline-middle;
		position: relative;
		right:10rpx;
	}
</style>
<template>
	<view>
		<uni-nav-bar class="bold" left-icon="back" title="访客预约" fixed="true" shadow="false" @clickLeft="leftBack"></uni-nav-bar>
		<div class="container">
			<text class="t">请选择服务</text>
			<view class="f online_book"><navigator url="./visitorMsg"><uni-icons type="compose" size="40" color="#fff" class="icon"></uni-icons>在线预约</navigator></view>
			<view class="f book_records"><navigator url="./searchVisitorMsg"><uni-icons type="search" size="40" color="#fff" class="icon"></uni-icons>预约登记信息查询</navigator></view>
			<view class="explain">
				<view class="con">
					<text>预约登记规则：</text>
					<p>1. 访客提交个人和被访人信息</p>
					<p>2. 待管理员审核通过，会发送通行码至您的邮箱和小程序</p>
					<p>3. 访客凭收到的二维码来访刷码即可通行</p>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	import { leftBack } from '../../commom/js/utils.js'
	
	export default{
		data() {
			return {
			}
		},
		methods: {
			leftBack() {
				leftBack()
			}
		}
	}
</script>